<template>
  <div class="na-table">
    <el-container>
      <!-- 筛选栏 -->
      <el-header height="32px" class="mb8">
        <div class="filter_column">
          <!-- 左侧  -->
          <div class="search_box">
            <!-- 搜索  -->
            <div class="search_input">
              <el-input
                v-model="search.likeWords"
                :placeholder="'请输入' + searchPlaceholder"
                @change="updateDatas"
                size="small"
              >
                <template #prepend>
                  <el-select
                    v-model="search.QueryDataBaseFiled"
                    placeholder="请选择"
                    @change="searchTypeChange"
                    v-if="searchOptions.length > 0"
                  >
                    <template v-for="item in searchOptions">
                      <el-option
                        :label="item.columnName"
                        :value="item.columnCode"
                      />
                    </template>
                  </el-select>
                </template>
                <template #append>
                  <i class="iconfont searchIcon" @click="updateDatas" />
                </template>
              </el-input>
            </div>
            <slot name="slotSearch" />
            <!-- 状态筛选 -->
            <div
              class="status_box"
              v-if="datas.statusList && datas.statusList.length > 0"
            >
              <span>状态筛选：</span>
              <el-select
                v-model="search[datas.statusWord]"
                @change="handleSelectChange"
                size="small"
                class="ml8"
              >
                <el-option
                  v-for="item in datas.statusList"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </div>
          </div>
          <!-- 右侧-新建，高级筛选 -->
          <div class="senior_box">
            <el-button
              type="primary"
              @click="addBtn"
              class="mr5"
              size="small"
              v-permission="datas.addPermission"
              v-if="datas.addTitle != ''"
              ><i
                class="iconfont mr5 f14"
                :class="datas.addIcon ? datas.addIcon : 'plusIcon'"
              ></i
              >{{ datas.addTitle || "新建" }}
            </el-button>
            <slot name="slot1" />
            <el-button
              @click="advancedVisible = true"
              class="senior_btn"
              v-if="datas.senior || false"
              ><i class="iconfont screenIcon"></i>
            </el-button>
            <el-button
              @click="updateDatas"
              class="refresh_btn"
              v-if="datas.refresh"
              ><i class="iconfont refreshIcon"></i>
            </el-button>
            <HeadSeting
              :list-data.sync="thead"
              @saveHeader="saveHeader"
              class="headSet"
            />
          </div>
        </div>
      </el-header>
      <!-- 内容栏 -->
      <el-main class="table_content">
        <el-container>
          <el-header height="37px" v-if="operationBtn.length > 0">
            <!-- 按钮栏 -->
            <div class="btn_column">
              <div class="btn_list">
                <template v-for="item in operationBtn">
                  <!-- 按钮 -->
                  <el-dropdown v-if="item.children && item.children.length>0" >
                    <el-button type="primary" size="small" class="ml8" :disabled="item.disabled">
                      {{ item.temTitle }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-for="k in item.children" @click.native="normalBtn(item,k)">{{ k.title }}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <el-button
                    v-else
                    @click="normalBtn(item)"
                    type="primary"
                    :disabled="item.disabled"
                    size="small"
                    v-permission="item.permission"
                  >
                    {{ item.temTitle }}
                  </el-button>
                </template>
              </div>
              <div>
                <el-checkbox
                  v-model="search[datas.otherCheckboxWord]"
                  label="显示所有员工"
                  :true-label="1"
                  :false-label="0"
                  v-if="datas.otherCheckbox"
                  @change="handleOtherCheckbox"
                />
                <el-checkbox
                  v-model="search[datas.finish]"
                  label="显示完成"
                  v-if="datas.isShowFinish"
                  @change="handleFinishCheckbox"
                />
                <el-checkbox
                  v-model="search[datas.voidWord]"
                  :label="datas.checkboxLabel || '显示作废'"
                  :true-label="1"
                  :false-label="0"
                  v-if="datas.voidWord"
                  @change="handleShowViod"
                />
              </div>
            </div>
          </el-header>
          <el-main>
            <!-- 表格内容 -->
            <div class="table_column" ref="table_column">
              <el-table
                :data="tbody"
                highlight-current-row
                @current-change="handleCurrentChange"
                :row-key="datas.tableId"
                show-header-overflow
                show-body-overflow
                id="tableId"
                fit
                lazy
                @row-dblclick="tableDblclick"
                style="width: 100%"
                :header-cell-style="{
                  background: '#f2f2f2!important',
                  color: '#000!important',
                  fontWeight: '600',
                }"
                height="100%"
                border
                @header-dragend="headerDragend"
                ref="multipleTable"
                @expand-change="expandChange"
                :summary-method="getSummaries"
                :show-summary="datas.showSum || false"
                @selection-change="handleSelectionChange"
              >
                <slot></slot>
                <el-table-column
                  type="selection"
                  width="55"
                  :selectable="isDisabledSelect"
                  v-if="datas.select"
                >
                </el-table-column>
                <el-table-column
                  type="index"
                  width="60"
                  label="序号"
                  align="center"
                  fixed="left"
                />
                <template v-for="(head, index) in thead">
                  <template v-if="head.visible && head.isForceHide == 0">
                    <el-table-column
                      :key="head.columnCode"
                      :label="head.columnName"
                      :align="head.columnAlign"
                      :fixed="head.isFloat ? 'left' : null"
                      :min-width="getMinWidth(head)"
                      
                      :sortable="head.isSort || false"
                      show-overflow-tooltip
                      :prop="head.columnCode"
                    >
                      <template #default="scope">
                        <!-- 标签式内容 -->
                        <template v-if="tagColumn(head.columnName)">
                          <el-tag :type="tagColor(head, scope.row)" effect="dark">
                            {{ scope.row[head.columnCode] }}
                          </el-tag>
                        </template>
                        <!-- 开关 -->
                        <template v-else-if="head.columnDataType == '开关'">
                          <el-switch
                            v-model="scope.row[head.columnCode]"
                            size="small"
                          />
                        </template>
                        <!-- 内嵌-表格 -->
                        <template
                          v-else-if="head.columnClass == 'inline-table'"
                        >
                          <el-popover
                            placement="top"
                            :width="1000"
                            trigger="click"
                          >
                            <template #reference>
                              <el-button type="text" @dblclick.stop="false">
                                <p>{{ scope.row[head.columnCode].length }}</p>
                              </el-button>
                            </template>
                            <el-table
                              :data="scope.row[head.columnCode]"
                              size="small"
                            >
                              <template v-for="column in head.thead">
                                <el-table-column
                                  :width="column.width"
                                  :property="column.prop"
                                  :label="column.title"
                                  :align="column.align"
                                />
                              </template>
                            </el-table>
                          </el-popover>
                        </template>
                        <template
                          v-else-if="
                            head.columnName == '关联单号' &&
                            head.tableCode == 'producebackmaterialbilllist'
                          "
                        >
                          <div
                            class="cellcontent"
                            style="cursor: pointer; color: #3f61f1"
                            @click="checkProductList(scope.row)"
                          >
                            {{ getContent(scope.row[head.columnCode]) }}
                          </div>
                        </template>
                        <template v-else-if="head.columnName == '生产进度'">
                          <div class="cellcontent">
                            <el-popover
                              placement="bottom"
                              width="600"
                              trigger="hover"
                            >
                            <div class="pt5 pb5">总耗时：{{getHour(scope.row.productionProgressList) }}</div>
                              <el-table
                                :data="scope.row.productionProgressList"
                                height="300"
                                size="mini"
                              >
                                <el-table-column
                                  width="180"
                                  property="produceTaskBillNo"
                                  label="生产单号"
                                ></el-table-column>
                                <el-table-column
                                  width="100"
                                  property="machineName"
                                  label="设备名称"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="craftName"
                                  label="工艺名称"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="craftTaskState"
                                  label="工艺状态"
                                >
                                  <template #default="children">
                                    <el-tag
                                      v-if="children.row.craftTaskState == 0"
                                      type="info"
                                      size="small"
                                      >待开始</el-tag
                                    >
                                    <el-tag
                                      v-else-if="
                                        children.row.craftTaskState == 1
                                      "
                                      size="small"
                                      >生产中</el-tag
                                    >
                                    <el-tag
                                      v-else-if="
                                        children.row.craftTaskState == 2
                                      "
                                      type="success"
                                      size="small"
                                      >已完成</el-tag
                                    >
                                    <el-tag v-else type="warning" size="small"
                                      >流转</el-tag
                                    >
                                  </template>
                                </el-table-column>
                                <el-table-column
                                  width="150"
                                  property="craftTaskPlanUseTime"
                                  label="计划用时"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="planCpMeters"
                                  label="计划米数"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="beginProduceTime"
                                  label="开始时间"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="finishProduceTime"
                                  label="完成时间"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="actualHour"
                                  label="实际用时"
                                ></el-table-column>
                              </el-table>
                              <el-progress
                                slot="reference"
                                :percentage="scope.row[head.columnCode]"
                                :stroke-width="10"
                                :show-text="false"
                                color="#67c23a"
                              ></el-progress>
                            </el-popover>
                          </div>
                        </template>
                        <template v-else-if="head.columnName == '刀版明细'">
                          <div class="cellcontent">
                            <el-popover
                              placement="bottom"
                              width="600"
                              trigger="hover"
                            >
                              <el-table
                                :data="scope.row.detailList"
                                height="300"
                                size="mini"
                              >
                                <el-table-column
                                  width="180"
                                  property="width"
                                  label="宽"
                                ></el-table-column>
                                <el-table-column
                                  width="100"
                                  property="height"
                                  label="高"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="shapeName"
                                  label="形状"
                                >
                                </el-table-column>
                                <el-table-column
                                  width="150"
                                  property="rAngle"
                                  label="R角"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="direction"
                                  label="方向"
                                >
                                  <template #default="children">
                                    <span v-if="children.row.direction == 0"
                                      >宽</span
                                    >
                                    <span v-else>高</span>
                                  </template>
                                </el-table-column>
                                <el-table-column
                                  width="150"
                                  property="spacing"
                                  label="间距"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="quantity"
                                  label="数量"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="remark"
                                  label="备注"
                                ></el-table-column>
                              </el-table>
                              <span
                                slot="reference"
                                style="color: #409eff; cursor: pointer"
                                >{{ scope.row.detailList.length }}</span
                              >
                            </el-popover>
                          </div>
                        </template>
                        <template v-else-if="head.columnName == '采购明细项数'">
                          <div class="cellcontent">
                            <el-popover
                              placement="bottom"
                              width="600"
                              trigger="hover"
                            >
                              <el-table
                                :data="scope.row.purchaseDetailsList"
                                height="300"
                                size="mini"
                              >
                                <el-table-column
                                  width="180"
                                  property="specificationCode"
                                  label="规格编号"
                                ></el-table-column>
                                <el-table-column
                                  width="100"
                                  property="categoryName"
                                  label="物料类型"
                                ></el-table-column>
                                <el-table-column
                                  width="180"
                                  property="goodsName"
                                  label="物料名称"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="specificationName"
                                  label="规格型号"
                                >
                                </el-table-column>
                                <el-table-column
                                  width="100"
                                  property="goodsUnitName"
                                  label="物料单位"
                                ></el-table-column>
                                <el-table-column
                                  width="200"
                                  property="supplierName"
                                  label="供应商"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="planPurchaseQuantity"
                                  label="采购数量"
                                ></el-table-column>
                              </el-table>
                              <span
                                slot="reference"
                                style="color: #409eff; cursor: pointer"
                                >{{
                                  scope.row.purchaseDetailsList.length
                                }}</span
                              >
                            </el-popover>
                          </div>
                        </template>
                        <template v-else-if="head.columnName == '领料明细'">
                          <div class="cellcontent">
                            <el-popover
                              placement="bottom"
                              width="600"
                              trigger="hover"
                            >
                              <el-table
                                :data="scope.row.getProduceMaterialMxList"
                                height="300"
                                size="mini"
                              >
                                <el-table-column
                                  width="180"
                                  property="specificationCode"
                                  label="规格编号"
                                ></el-table-column>
                                <el-table-column
                                  width="100"
                                  property="goodsCategoryName"
                                  label="物料类型"
                                ></el-table-column>
                                <el-table-column
                                  width="180"
                                  property="goodsName"
                                  label="物料名称"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="specificationName"
                                  label="规格型号"
                                >
                                </el-table-column>
                                <el-table-column
                                  width="150"
                                  property="applyGetQuantity"
                                  label="数量"
                                ></el-table-column>
                                <el-table-column
                                  width="100"
                                  property="goodsUnitName"
                                  label="使用单位"
                                ></el-table-column>
                              </el-table>
                              <span
                                slot="reference"
                                style="color: #409eff; cursor: pointer"
                                >{{
                                  scope.row.getProduceMaterialMxList.length
                                }}</span
                              >
                            </el-popover>
                          </div>
                        </template>
                        <template v-else-if="head.columnName == '退料明细'">
                          <div class="cellcontent">
                            <el-popover
                              placement="bottom"
                              width="600"
                              trigger="hover"
                            >
                              <el-table
                                :data="scope.row.backProduceMaterialMxList"
                                height="300"
                                size="mini"
                              >
                                <el-table-column
                                  width="180"
                                  property="specificationCode"
                                  label="规格编号"
                                ></el-table-column>
                                <el-table-column
                                  width="100"
                                  property="goodsType"
                                  label="物料类型"
                                ></el-table-column>
                                <el-table-column
                                  width="180"
                                  property="goodsName"
                                  label="物料名称"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="specificationName"
                                  label="规格型号"
                                >
                                </el-table-column>
                                <el-table-column
                                  width="150"
                                  property="quantity"
                                  label="数量"
                                ></el-table-column>
                                <el-table-column
                                  width="100"
                                  property="goodsUnit"
                                  label="使用单位"
                                ></el-table-column>
                              </el-table>
                              <span
                                slot="reference"
                                style="color: #409eff; cursor: pointer"
                                >{{
                                  scope.row.backProduceMaterialMxList.length
                                }}</span
                              >
                            </el-popover>
                          </div>
                        </template>
                        <template v-else-if="head.columnName == '入库明细'">
                          <div class="cellcontent">
                            <el-popover
                              placement="bottom"
                              width="600"
                              trigger="hover"
                            >
                              <el-table
                                :data="scope.row.inStockDetailList"
                                height="300"
                                size="mini"
                              >
                                <el-table-column
                                  width="180"
                                  property="specificationCode"
                                  label="规格编号"
                                ></el-table-column>
                                <el-table-column
                                  width="100"
                                  property="goodsType"
                                  label="物料类型"
                                ></el-table-column>
                                <el-table-column
                                  width="180"
                                  property="goodsName"
                                  label="物料名称"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="specificationName"
                                  label="规格型号"
                                >
                                </el-table-column>
                                <el-table-column
                                  width="200"
                                  property="supplierName"
                                  label="供应商"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="productionBatchNumber"
                                  label="生产批次"
                                >
                                </el-table-column>
                                <el-table-column
                                  width="150"
                                  property="productionDate"
                                  label="生产日期"
                                >
                                </el-table-column>
                                <el-table-column
                                  width="150"
                                  property="inStockQuantity"
                                  label="数量"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="goodsUnit"
                                  label="使用单位"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="storageAreaInfo"
                                  label="库位"
                                ></el-table-column>
                              </el-table>
                              <span
                                slot="reference"
                                style="color: #409eff; cursor: pointer"
                                >{{ scope.row.inStockDetailList.length }}</span
                              >
                            </el-popover>
                          </div>
                        </template>
                        <template v-else-if="head.columnName == '出库明细'">
                          <div class="cellcontent">
                            <el-popover
                              placement="bottom"
                              width="600"
                              trigger="hover"
                            >
                              <el-table
                                :data="scope.row.detailList"
                                height="300"
                                size="mini"
                              >
                                <el-table-column
                                  width="180"
                                  property="specificationCode"
                                  label="规格编号"
                                ></el-table-column>
                                <el-table-column
                                  width="100"
                                  property="categoryName"
                                  label="物料类型"
                                ></el-table-column>
                                <el-table-column
                                  width="180"
                                  property="goodsName"
                                  label="物料名称"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="specificationName"
                                  label="规格型号"
                                >
                                </el-table-column>
                                <el-table-column
                                  width="200"
                                  property="supplierName"
                                  label="供应商"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="productionBatchNumber"
                                  label="生产批次"
                                >
                                </el-table-column>
                                <el-table-column
                                  width="150"
                                  property="productionDate"
                                  label="生产日期"
                                >
                                </el-table-column>
                                <el-table-column
                                  width="150"
                                  property="outStockQuantity"
                                  label="数量"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="goodsUnitName"
                                  label="使用单位"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  property="storageAreaInfo"
                                  label="库位"
                                >
                                  <template #default="{ row }">
                                    <span>{{
                                      row.warehouseAreaName + row.areaShelfName
                                    }}</span>
                                  </template>
                                </el-table-column>
                              </el-table>
                              <span
                                slot="reference"
                                style="color: #409eff; cursor: pointer"
                                >{{ scope.row.detailList.length }}</span
                              >
                            </el-popover>
                          </div>
                        </template>
                        <template v-else-if="head.columnName == '核价明细'">
                          <div class="cellcontent">
                            <el-popover
                              placement="bottom"
                              width="600"
                              trigger="hover"
                            >
                              <el-table
                                :data="scope.row.detailList"
                                height="300"
                                size="mini"
                              >
                                <el-table-column
                                  prop="supplierGoodsNumber"
                                  width="150"
                                  align="center"
                                  label="供应商料号"
                                >
                                </el-table-column>
                                <el-table-column
                                  prop="goodsName"
                                  width="150"
                                  align="center"
                                  label="物料名称"
                                >
                                </el-table-column>
                                <el-table-column
                                  prop="goodsTypeName"
                                  width="150"
                                  align="center"
                                  label="物料类型"
                                >
                                </el-table-column>
                                <el-table-column
                                  prop="goodsUnitName"
                                  width="150"
                                  align="center"
                                  label="使用单位"
                                >
                                </el-table-column>
                                <el-table-column
                                  prop="priceUnitName"
                                  width="150"
                                  align="center"
                                  label="计价单位"
                                >
                                </el-table-column>
                                <el-table-column
                                  prop="goodsPriceLast"
                                  width="150"
                                  align="center"
                                  label="原单价"
                                >
                                </el-table-column>
                                <el-table-column
                                  prop="goodsPriceLastTime"
                                  width="150"
                                  align="center"
                                  label="原核准日"
                                >
                                </el-table-column>
                                <el-table-column
                                  prop="goodsPriceCurrent"
                                  width="150"
                                  align="center"
                                  label="新单价"
                                >
                                </el-table-column>

                                <el-table-column
                                  prop="remark"
                                  align="center"
                                  label="备注"
                                >
                                </el-table-column>
                              </el-table>
                              <span
                                slot="reference"
                                style="color: #409eff; cursor: pointer"
                                >{{ scope.row.detailList.length }}</span
                              >
                            </el-popover>
                          </div>
                        </template>
                        <!-- 其他 -->
                        <template v-else>
                          <div class="cellcontent">
                            {{ getContent(scope.row[head.columnCode]) }}
                          </div>
                        </template>
                      </template>
                    </el-table-column>
                  </template>
                </template>
              </el-table>
            </div>
          </el-main>
          <el-footer height="40px">
            <!-- 页码栏 -->
            <div class="page_column">
              <pagination
                v-if="search.pageIndex"
                :total="search.total || 0"
                :page.sync="search.pageIndex"
                :limit.sync="search.pageSize"
                @pagination="updateDatas"
              />
            </div>
          </el-footer>
        </el-container>
      </el-main>
    </el-container>

    <!-- 高级搜索 -->
    <el-drawer
      v-model="advancedVisible"
      title="高级搜索"
      custom-class="seniorSearch"
    >
      <el-form :model="search" label-position="top">
        <el-form-item label="单据状态">
          <el-select v-model="search.documentStatus"> </el-select>
        </el-form-item>
        <el-form-item label="到货状态">
          <el-select v-model="search.arrivalStatus"> </el-select>
        </el-form-item>
        <el-form-item label="期望到货日期">
          <el-date-picker
            v-model="search.arrivalTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="创建日期">
          <el-date-picker
            v-model="search.createTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="创建人员">
          <el-select v-model="search.creator"> </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="draw_footer">
          <el-button @click="updateDatas" type="primary">立即搜索</el-button>
          <el-button @click="resetFilter">重置条件</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import HeadSeting from "@/components/HeadSeting";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import { hasPermission, empty } from "@/utils";
export default {
  name: "na-table",
  components: {
    Pagination,
    HeadSeting,
  },
  props: {
    datas: {
      type: Object,
      default: {
        headId: "head", //表头列显隐组件所需ID-避免多个页面id重复问题
        tableId: "id", //表格列表key,也就是一条数据的唯一标识
        senior: false, //高级搜索是否显示
        disableWord: "disableName", //是否禁用显示的字段
        disableStatus: "启用", //判断未禁用的状态值
        isLockedWord: "isLocked",
        isLockedStatus: "锁定",
        // addTitle:'',//新建按钮名称-不填即为''则不显示按钮，默认显示新建则不需要该字段
        addPermission: "", //新建按钮权限
        voidWord: "", //需要查询作废的字段
        otherCheckbox: false, //表格上多选框
        otherCheckboxWord: "", //需要查询多选框的字段
        statusList: [], //状态筛选条件列表
        checkboxLabel: "",
        statusWord: "", //状态筛选的字段
        refresh: false, //刷新按钮
        showSum: false, //显示合计
        select: false, //多选
        //表格按钮
        operationBtn: [
          {
            title: "查看", //按钮名称
            methodsName: "", //按钮绑定方法的字段
            children:[{
              title: "查看", //按钮名称
              methodsName: "", //按钮绑定方法的字段
            }]
            // permission:"MenuCode3-1-3",//按钮权限
            // hideCondition:{//按钮显隐条件
            //   prop:'itemState',//控制显隐的状态字段
            //   show:[//有哪些状态可以使用-值必须跟状态的类型保持一致
            //     '待确认',
            //   ],
            //   except:'',//除了某个状态其他都可以使用
            // },
          },
          {
            title: "完成",
            methodsName: "",
          },
          {
            title: "编辑",
            methodsName: "",
          },
          {
            title: "禁用",
            methodsName: "",
          },
          {
            title: "删除",
            methodsName: "",
          },
        ],
        //表格内容
        tbody: [],
        //表格表头
        thead: [],
      },
    }, //数据
    searchObj: {
      type: Object,
      default: {},
    }, //搜索条件
  },
  computed: {
    //搜索条件
    search() {
      return this.searchObj;
    },
    operationBtn() {
      let arr = [{
            title: "导出excel",
            methodsName: "handleDownloadExcel",
            isShow:true
          }]
      this.datas.operationBtn = [...this.datas.operationBtn,...arr]
      return this.datas.operationBtn;
    },
    tbody() {
      return this.datas.tbody;
    },
    thead: {
      get: function () {
        // this.getOptions();
        return this.datas.thead;
      },
      set: function (val) {
        this.datas.thead = val;
        this.$emit("update:datas", this.datas);
      },
    },
    // search: {
    //   get: () => {return this.searchObj},
    //   set: () => {
    //     this.$emit("update:searchObj", this.searchObj);
    //   },
    // },
  },
  watch: {
    tbody: {
      deep: true,
      handler() {
        if (this.currentData) {
          this.currentData = this.tbody.find(
            (item) =>
              item[this.datas.tableId] == this.currentData[this.datas.tableId]
          );
          this.handleCurrentChange(this.currentData);
        }
      },
    },
    thead: {
      deep: true,
      handler() {
        this.getOptions();
      },
    },
  },
  data() {
    return {
      searchOptions: [], //查询条件
      searchPlaceholder: "", //默认
      advancedVisible: false, //高级搜索弹窗
      voidParameter: false, //是否显示作废
      currentData: null, //选中的表格数据
      rowId: "",
      totalTime:''
    };
  },
  methods: {
    //根据表头获取可搜索的字段
    getOptions() {
      if (this.thead.length > 0) {
        this.searchOptions = [];
        this.thead.forEach((item) => {
          if (item.isCanSearch) {
            this.searchOptions.push(item);
          }
        });
      }
      if (this.searchOptions.length > 0 && this.searchPlaceholder == "") {
        // 输入框默认内容
        this.searchPlaceholder = this.searchOptions[0].columnName;
        // 默认选中
        this.search.QueryDataBaseFiled = this.searchOptions[0].columnCode;
      }
    },

    //状态筛选选择事件
    handleSelectChange(e) {
      this.$emit("change", e);
    },

    // 搜索条件改变
    searchTypeChange(value) {
      let obj = this.searchOptions.find((item) => item.columnCode == value);
      this.searchPlaceholder = obj.columnName;
    },
    // 更新数据
    updateDatas() {
      this.$emit("updateDatas");
    },
    // 高级搜索-重置条件
    resetFilter() {
      this.serch.documentStatus = "";
      this.serch.arrivalStatus = "";
      this.serch.arrivalTime = [];
      this.serch.createTime = [];
      this.serch.creator = "";
    },
    //是否作废
    cancellation() {
      let cancellationNum = 0;
      this.operationBtn.forEach((item) => {
        if (item.title === "作废" && item.isShowCheckbox) {
          cancellationNum++;
        }
      });
      if (cancellationNum === 0) {
        return false;
      } else {
        return true;
      }
    },
    // 新建按钮
    addBtn() {
      this.$emit("newAdd");
    },
    // 按钮事件
    normalBtn(row,item) {
      if(this.currentData && row.methodsName !='handleDownloadExcel'){
        this.$parent[row.methodsName](this.currentData,item);
      }else{
        this[row.methodsName]()
      }
    },

    //判断是否禁用多选框
    isDisabledSelect(row, index) {
      if (
        row.produceBillState !== 2 &&
        row.produceBillState !== 0 &&
        row.materialState !== 1 &&
        row.taskProduceState !== 3
      ) {
        return true;
      } else {
        return false;
      }
    },

    //是否显示作废事件
    handleShowViod(e) {
      this.$emit("checkboxChange", e);
    },

    //
    handleOtherCheckbox(e) {
      this.$emit("otherChange", e);
    },

    //已完成复选框
    handleFinishCheckbox(e) {
      this.$emit("finishChange", e);
    },

    // 判断是否禁止
    isDisabled() {
      let operationBtn = this.operationBtn;
      if (operationBtn.length > 0) {
        operationBtn.forEach((btn) => {
          btn.disabled = true;
          if(btn.isShow){
            btn.disabled = false
          }

          if (this.currentData) {
            if (btn.hideCondition && btn.hideCondition.show.length > 0) {
              if (
                btn.hideCondition.show.includes(
                  this.currentData[btn.hideCondition.prop]
                )
              ) {
                btn.disabled = false;
              }
            } else if (btn.hideCondition && empty(btn.hideCondition.except)) {
              if (
                this.currentData[btn.hideCondition.prop] !=
                btn.hideCondition.except
              ) {
                btn.disabled = false;
              }
            } else {
              btn.disabled = false;
            }
          }
        });
      }
      this.$forceUpdate();
    },
    //表格内容点击事件
    handleCurrentChange(row) {
      let operationBtn = this.operationBtn;
      if (row) {
        this.currentData = row;
        //如果有禁用以及启用-切换按钮文字
        let index = operationBtn.findIndex((l) => l.title == "禁用");
        if (index > -1) {
          //切换按钮文字
          operationBtn[index].temTitle =
            row[this.datas.disableWord] == this.datas.disableStatus
              ? "禁用"
              : "启用";
        }

        let i = operationBtn.findIndex((l) => l.title == "锁定");
        if (i > -1) {
          //切换按钮文字
          operationBtn[i].temTitle =
            row[this.datas.isLockedWord] == this.datas.isLockedStatus
              ? "解锁"
              : "锁定";
        }
      }
      this.isDisabled();
    },
    //表格内容双击
    tableDblclick() {
      let operationBtn = this.operationBtn;
      let index = operationBtn.findIndex(
        (item) =>
          item.title == "编辑" ||
          item.title == "修改" ||
          item.title == "库存明细"
      );
      let btn = operationBtn[index];
      if (index > -1) {
        let flag = true;
        //判断权限
        if (btn.permission) {
          flag = hasPermission(btn.permission);
        }
        //判断状态
        if (btn.hideCondition && btn.hideCondition.show.length > 0) {
          if (
            btn.hideCondition.show.includes(
              this.currentData[btn.hideCondition.prop]
            )
          ) {
            flag = true;
          } else {
            flag = false;
          }
        } else if (btn.hideCondition && empty(btn.hideCondition.except)) {
          if (
            this.currentData[btn.hideCondition.prop] != btn.hideCondition.except
          ) {
            flag = true;
          } else {
            flag = false;
          }
        }
        if (flag) {
          this.normalBtn(btn);
          return;
        }
      }
      let i = operationBtn.findIndex((item) => item.title == "查看");
      if (i > -1) {
        this.normalBtn(operationBtn[i]);
      }
    },
    //表格宽度拖动
    headerDragend(newWidth, b, cloumn, d) {
      let obj = this.thead.find((item) => item.columnName == cloumn.label);
      if (obj) {
        obj.columnWidth = newWidth;
        this.saveHeader();
      }
    },

   getHour(list) {
      let sum = 0
      list.forEach((item)=>{
        sum+=item.actualHour
      })
      return sum
},

  getDate() {
      return this.dayjs().format("YYYY-MM-DD");
    },

//导出excel
  handleDownloadExcel() {
    this.datas.thead.forEach((item)=>{
      if(item.columnName == '生产进度' || item.columnName.indexOf('明细') >-1){
        item.visible = false
      }
    })
    setTimeout(()=>{
      var xlsxParam = { raw: true };
      var fileName = `${this.$route.meta.title}.xlsx`
      let tables = document.querySelector('#tableId').cloneNode(true) // 重点
      let fixed  = tables.querySelector(".el-table__fixed")
      tables.removeChild(fixed) // 重点
      var wb = XLSX.utils.table_to_book(
        tables,
        xlsxParam
      );

      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          fileName
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
      },300)
      setTimeout(()=>{
        this.datas.thead.forEach((item)=>{
        if(item.columnName == '生产进度' || item.columnName.indexOf('明细') >-1){
          item.visible = true
        }
      })
      },300)
    },

    //保存表头
    saveHeader() {
      this.$api.common.saveTableStyle(this.thead);
    },

    //关联单号点击事件
    checkProductList(row) {
      this.$router.push({
        path: "/business/orderDetail", // 跳转的路径
        query: {
          tabIndex: 5,
          saleOrderNo: row.saleOrderNo,
        },
      });
    },

    //标签式内容
    tagColumn(name) {
      //设置为标签式内容
      let names = [
        "状态",
        "启用状态",
        "是否禁用",
        "参数类型",
        "标签贴图状态",
        "单据状态",
        "到货状态",
        "领料状态",
        "颜色状态",
        "机台状态",
        "数据状态",
        "生产状态",
        "出库状态",
        "订单状态",
        "彩稿状态",
        "审核状态",
        "审核结果",
        "员工状态",
        "作业状态",
        "入库状态",
        "刀版状态",
        "业务信息",
        "设计信息",
        "生产信息",
        "包装信息",
        "产品状态",
        "规格状态",
        "规格启用状态",
        "已打印",
      ];
      if (names.indexOf(name) > -1) {
        return true;
      }
      return false;
    },
    //标签颜色
    tagColor(head, row) {
      let value = row[head.columnCode];
      //如果为禁用/启用的状态值
      if (
        this.datas.disableWord != "" &&
        head.columnCode == this.datas.disableWord
      ) {
        if (value == this.datas.disableStatus) {
          return "success";
        } else {
          return "info";
        }
      } else if (head.columnName == "订单状态") {
        //如果状态不是启用禁用
        if (value == "已完成" || value == "已确认") {
          return "success";
        } else if (value == "制作中") {
          return "warning";
        } else if (value == "已到达") {
          return "";
        } else {
          return "info";
        }
      } else if (head.columnName == "单据状态") {
        if (value == "待确认" || value == "待到货") {
          return "info";
        } else if (
          value == "待审核" ||
          value == "待入库" ||
          value == "待出库"
        ) {
          return " ";
        } else if (
          value == "已完成" ||
          value == "已入库" ||
          value == "已确认" ||
          value == "已出库"
        ) {
          return "success";
        } else {
          return "danger";
        }
      } else if (head.columnName == "已打印") {
        if (["已打印",'是'].includes(value)) {
          return "success";
        } else {
          return "info";
        }
      } else if (head.columnName == "领料状态") {
        if (value == "待领料") {
          return "info";
        } else if (value == "已领料") {
          return "success";
        }
      } else if (head.columnName == "生产状态") {
        if (value == "生产中") {
          return "";
        } else if (value == "已完成" || value == "已开单") {
          return "success";
        } else if (value == "已停工") {
          return "danger";
        } else if (value == "已作废") {
          return "warning";
        } else {
          return "info";
        }
      } else if (head.columnName == "出库状态") {
        if (value == "待出库") {
          return "info";
        } else {
          return "success";
        }
      } else if (head.columnName == "数据状态") {
        if (value == "已完成") {
          return "success";
        } else if (value == "未到达") {
          return "";
        } else {
          return "info";
        }
      } else if (head.columnName == "彩稿状态") {
        if (value == "审核通过") {
          return "success";
        } else if (value == "待审核") {
          return "";
        } else if (value == "拒绝") {
          return "danger";
        } else {
          return "info";
        }
      } else if (head.columnName == "审核状态") {
        if (value == "审核已通过") {
          return "success";
        } else if (value == "彩稿待审核") {
          return "";
        } else if (value == "审核未通过") {
          return "danger";
        } else {
          return "info";
        }
      } else if (head.columnName == "审核结果") {
        if (value == "审核通过") {
          return "success";
        } else if (value == "等待审核") {
          return "";
        } else if (value == "审核拒绝") {
          return "danger";
        } else {
          return "info";
        }
      } else if (head.columnName == "员工状态") {
        if (value == "在职") {
          return "success";
        } else {
          return "info";
        }
      } else if (head.columnName == "作业状态") {
        if (value == "已完成") {
          return "success";
        } else if (value == "已停工") {
          return "info";
        } else if (value == "已作废") {
          return "danger";
        } else {
          return "primary";
        }
      } else if (head.columnName == "入库状态") {
        if (value == "已入库") {
          return "success";
        } else {
          return "info";
        }
      } else if (head.columnName == "启用状态") {
        if (value == "启用") {
          return "success";
        } else {
          return "info";
        }
      } else if (head.columnName == "刀版状态") {
        if (value == "正常") {
          return "";
        } else if (value == "已报废") {
          return "info";
        } else if (value == "已作废") {
          return "danger";
        }
      } else if (head.columnName == "业务信息") {
        if (value == "已填写") {
          return "success";
        } else {
          return "info";
        }
      } else if (head.columnName == "设计信息") {
        if (value == "已填写") {
          return "success";
        } else {
          return "info";
        }
      } else if (head.columnName == "生产信息") {
        if (value == "已填写") {
          return "success";
        } else {
          return "info";
        }
      } else if (head.columnName == "包装信息") {
        if (value == "已填写") {
          return "success";
        } else {
          return "info";
        }
      } else if (head.columnName == "产品状态") {
        if (value == "已锁定") {
          return "success";
        } else {
          return "info";
        }
      } else if (head.columnName == "规格状态") {
        if (value == "待确认") {
          return "primary";
        } else if (value == "已确认") {
          return "success";
        } else {
          return "danger";
        }
      } else if (head.columnName == "规格启用状态") {
        if (value == "启用") {
          return "success";
        } else {
          return "info";
        }
      }
    },
    //获取数据
    getContent(data) {
      if (data === "" || data === null || data === undefined) {
        return "--";
      }
      return data;
    },
    // 最小宽度
    getMinWidth(head) {
      if (!head.columnName) {
        return 0;
      }
      let width = parseInt(head.columnWidth);
      let min = head.columnName.length * 16 + 25;
      if (head.columnWidth) {
        return width;
      }
      return min;
    },
    //展开变动
    expandChange(row, expanded) {
      this.$parent.expandChange(row, expanded);
    },
    //合计
    getSummaries(param) {
      return this.$parent.getSummaries(param);
    },
    //多选变动
    handleSelectionChange(row) {
      this.$parent.handleSelectionChange(row);
    },
  },
  mounted() {
    //根据表格设置按钮
    this.handleCurrentChange();
    let operationBtn = this.operationBtn;
    if (operationBtn.length > 0) {
      operationBtn.forEach((btn) => {
        btn.temTitle = btn.title;
      });
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout();
    });
  },
  beforeDestroy() {
    window.onresize = null;
  },
};
</script>
<style lang="scss" scoped>
.na-table {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 16px;
  overflow: hidden;

  .el-container {
    width: 100%;
    height: 100%;

    .el-header,
    .el-main,
    .el-footer {
      padding: 0;
    }
  }

  // 搜索栏
  .filter_column {
    display: flex;
    align-items: center;
    justify-content: space-between;

    // 搜索框
    .search_box {
      display: flex;

      ::v-deep .search_input {
        .el-input {
          .el-input__inner {
            width: 300px;
          }

          .el-input-group__prepend {
            padding: 0;

            .el-select {
              margin: -5px -3px;
            }

            .el-input__inner {
              width: 120px;
            }
          }

          .el-input-group__append {
            padding: 0;

            .iconfont {
              padding: 0 20px;
              cursor: pointer;
            }
          }
        }
      }

      .status_box {
        margin-left: 16px;
        display: flex;

        span {
          white-space: nowrap;
          line-height: 32px;
        }
      }
    }

    //右侧按钮
    .senior_box {
      display: flex;
      align-items: center;

      .el-button {
        padding: 8px 15px;
      }

      .senior_btn {
        padding: 0 10px;
        margin: 0;

        &:hover {
          background: #3967ff;
          color: #fff;
        }
      }

      .refresh_btn {
        padding: 7px;
        margin: 0;
      }

      ::v-deep .headSet {
        .setting-box {
          width: 32px;
          height: 32px;
          line-height: 32px;
          cursor: pointer;
        }
      }
    }
  }

  // 内容
  .table_content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #e6e6e6;

    // 按钮栏
    .btn_column {
      background: #f2f2f2;
      border-bottom: 1px solid #e6e6e6;
      padding: 6px 16px 6px 8px;
      display: flex;
      justify-content: space-between;

      .btn_list {
        display: flex;
        align-items: center;

        .el-button {
          margin-left: 8px;
          padding: 5px 11px;
          min-width: 40px !important;

          &:first-child {
            margin-left: 0;
          }

          span {
            font-size: 12px;
          }
        }
      }
    }

    .cellcontent {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    // 表格
    .table_column {
      width: 100%;
      height: 100%;

      .el-table {
        width: 100%;
        border: 0;

          

        .el-tag {
          height: 24px;
          line-height: 24px;
        }

        .imgBox {
          width: 100%;
          height: 48px;
          overflow: hidden;
          position: relative;
          text-align: center;

          img,
          .el-image,
          video {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }

          .iconfont {
            width: 48px;
            height: 48px;
            line-height: 48px;
            color: #fff;
            border-radius: 4px;
          }
        }

        .zipIcon {
          background: #398ef9;
        }

        .nullIcon {
          background: #999aaa;
        }
      }
    }

    //页码栏
    .page_column {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      padding: 6px;
      border-top: 1px solid #e6e6e6;
      background: #fafafa;

      ::v-deep .pagination-container {
        padding: 0;

        .el-pagination {
          background: #fafafa;

          > *,
          .el-input .el-input__inner,
          button,
          ul li {
            height: 24px;
            min-width: 24px;
            line-height: 24px;
            font-size: 12px;
          }

          .el-pagination__sizes {
            .el-input {
              width: 100px;
            }
          }
        }
      }
    }
  }
}

//高级搜索抽屉
.seniorSearch {
  .el-drawer__header {
    border-bottom: 1px solid #e6e6e6;
    margin: 0;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.04);
    padding: 0 8px 0 16px;
    height: 44px;
    display: flex;
    align-items: center;

    .el-drawer__title {
      color: #000;
      font-weight: 600;
    }
  }

  .hand {
    cursor: pointer !important;
  }

  .el-drawer__footer {
    padding: 0;
    border-top: 1px solid #e6e6e6;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;

    .draw_footer {
      width: 100%;
      padding: 8px 16px;
      display: flex;
      flex: 1;

      & > * {
        flex: 1;
      }
    }
  }
}
</style>
